<!doctype html>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<meta charset="UTF-8">
<table id="dg" class="easyui-datagrid" title="" style="height:auto"
		data-options="
			iconCls: 'icon-edit',
			singleSelect: true,
			toolbar: '#tb',
			method: 'get',
			fitColumns:true">
	<thead>
		<tr>
			<th data-options="field:'id',width:10">ID</th>
			<th data-options="field:'statusid',width:40">Status</th>
			<th data-options="field:'reference',width:30,align:'left',editor:'textarea'">Referência</th>
			<th data-options="field:'description',width:80,align:'left',editor:'textarea'">Descrição</th>
			<th data-options="field:'sizes',width:30,align:'center',editor:'textarea'">Tamanhos</th>
			<th data-options="field:'colors',width:30,align:'center',editor:'textarea'">Cores</th>
			<th data-options="field:'comments',width:80,editor:'textarea'">Observações</th>			
		</tr>
	</thead>

            <c:forEach items="${descriptive.items}" var="item">
                <tr>
                    <td>${item.id}</td>                    
					<td>${item.status.description}</td>
                    <td>${item.reference}</td>
                    <td>${item.description}</td>
                    <td>${item.sizes}</td>
                    <td>${item.colors}</td>
                    <td>${item.comments}</td>
                </tr>
            </c:forEach>

</table>

<div id="details" class="easyui-window" title="Detalhes do Item" data-options="modal:true,closed:true" style="width:800px;height:500px;padding:10px;">
	<!--<jsp:include page="itemDetails.jsp" /> -->
</div>

<div id="history" class="easyui-window" title="Histórico" data-options="modal:true,closed:true" style="width:800px;height:500px;padding:10px;">
	<div style="margin:5px">
		<a href="#" title="Voltar" onclick="closeHistory();"><i class="fa fa-mail-reply" style="font-size:18px;color:green;padding:5px;"></i>Voltar</a>
	</div>
	<br/>
	  
	<table id="dgHistory" class="easyui-datagrid" title=""
			data-options="rownumbers:true,singleSelect:true,method:'get',pagination:true,fitColumns:true">
		<thead>
			<tr>
				<th data-options="field:'date',width:80">Data</th>
				<th data-options="field:'time',width:60">Hora</th>
				<th data-options="field:'user',width:70">Usuário</th>
				<th data-options="field:'field',width:70">Campo</th>
				<th data-options="field:'from',width:100">Alterado De</th>
				<th data-options="field:'to',width:100">Para</th>
			</tr>
		</thead>
	</table>
</div>


<div id="tb" style="height:auto">
	<a href="#" title="Histórico" onclick="history();"><i class="fa fa-history" style="font-size:18px;color:green;padding:5px;"></i>Histórico</a>
	<!--  
	<a href="#" title="Arquivos" onclick="explorer();"><i class="fa fa-folder-open" style="font-size:18px;color:green;padding:5px;"></i>Arquivos</a>
	-->
</div>

	<script type="text/javascript">
		function details(){
			$('#details').window('open');
		}
		function history(){
			$('#history').window('open');
		}
		function closeHistory(){
			$('#history').window('close');
		}
	</script>
	